<template>
  <div class="content">
    <el-row>
      <el-col :span="24">
        <div>【超限统计】</div>
      </el-col>
    </el-row>
    <div id="over" class="over" :baseId="baseId"></div>
  </div>
</template>

<script>
import * as serviceApi from "../common/service.config";
import Axios from "axios";
import { mapState } from "vuex";

export default {
  name: "OverRun",
  methods: {
    create(idName, num) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        async: true,
        headers: {
          "content-type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
        data:
          'appMsg={"parameter":"{}","serviceCode":"' +
          serviceApi.CONSTANT.LIST_MONITOR_AND_SENSOR +
          '","timestamp":"","uuid":""}',
      }).then((res) => {
        let listArr = res.data.parameter.list;
        let overList;
        if (listArr.length == 1) {
          overList = listArr[0].sensorList;
        } else {
          overList = listArr[num].sensorList;
        }
        (this.bdArr = 0), (this.qxArr = 0), (this.ytArr = 0);
        for (let i in overList) {
          if (
            overList[i].moduleEnum == "00" &&
            overList[i].dataWarnStatus == "01"
          ) {
            this.bdArr++;
          } else if (
            overList[i].moduleEnum == "02" &&
            overList[i].dataWarnStatus == "01"
          ) {
            this.qxArr++;
          } else if (
            overList[i].moduleEnum == "01" &&
            overList[i].dataWarnStatus == "01"
          ) {
            this.ytArr++;
          }
        }
        let myChart = this.$echarts.init(document.getElementById(idName));
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#fff",
              },
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "8%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              axisLine: {
                lineStyle: {
                  type: "solid",
                  color: "rgba(255,255,255,0.5)",
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 11,
                },
              },
              data: ["北斗", "裂缝", "气象"],
              axisTick: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              max: 35,
              interval: 5,
              name: "(个)",
              splitLine: {
                //网格线
                lineStyle: {
                  type: "solid",
                  color: "rgba(255,255,255,0.2)",
                },
              },
              axisLine: {
                lineStyle: {
                  type: "solid",
                  color: "rgba(255,255,255,0.5)",
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "white",
                  fontSize: 14,
                },
              },
              axisTick: {
                show: false,
              },
              nameTextStyle: {
                color: "#fff",
              },
            },
          ],
          series: [
            {
              type: "bar",
              barWidth: 10,
              itemStyle: {
                emphasis: {
                  barBorderRadius: 30,
                },
                normal: {
                  color: function (params) {
                    let colorList = ["#69F0FF", "#FCBA62", "#F93F00"];
                    return colorList[params.dataIndex];
                  },
                  barBorderRadius: [10, 10, 0, 0],
                },
              },
              data: [this.bdArr, this.ytArr, this.qxArr],
            },
          ],
        };
        myChart.clear();
        myChart.setOption(option);
      });
    },
  },
  mounted() {
    let url = window.location.href;
    let id = url.split("?")[1].split("=")[1];
    switch (id) {
      case "1":
        this.create("over", 0);
        break;
      case "2":
        this.create("over", 1);
        break;
      case "3":
        this.create("over", 2);
        break;
      case "4":
        this.create("over", 3);
    }
  },
  updated() {
    switch (this.baseId) {
      case 1:
        this.create("over", 0);
        break;
      case 2:
        this.create("over", 1);
        break;
      case 3:
        this.create("over", 2);
        break;
      case 4:
        this.create("over", 3);
    }
  },
  computed: {
    ...mapState(["baseId"]),
  },
};
</script>

<style scoped>
.over {
  width: 300px;
  height: 250px;
}
.el-col > div {
  text-align: center;
  width: 70%;
  line-height: 35px;
  background: rgba(107, 151, 160, 0.5);
  color: #15f7ff;
  font-size: 22px;
  margin: 0 auto;
  margin-top: 10px;
}
</style>